<template>
    <div data-tauri-drag-region class="home" :style="{ backgroundColor: homeBackground }">
        <linyufan-header></linyufan-header>
        <FlipClock ref="childRefFlipClock" @dblclick="clockingTime" />
        <Countdown data-tauri-drag-region v-show="isShowCountdownTime" :labels="countdownLabels"
            :deadline="countdownDeadline" @dblclick="resetCountdownTime" />

        <div class="marquee" v-show="isShowmarqueeText">
            <el-tag size="large" type="primary" style="width: 100%;">
                <div class="marquee-text" :style="{ animationDuration: `${marqueeDuration}s` }">
                    {{ marqueeText }}
                </div>
            </el-tag>
        </div>

        <div class="marquee">
            <el-tag v-for="(item, index) in millisecondsData" :key="item" closable size="large" type="danger"
                style="width: 100%;margin-bottom: 10px;" @close="handleCloseTag(item)">
                <div style="text-align: center;">
                    {{ index + 1 }} - {{ item }}
                </div>
            </el-tag>
        </div>
    </div>
</template>

<script setup>
import { listen } from '@tauri-apps/api/event';
import { onBeforeMount, onMounted, ref, reactive } from 'vue';
import FlipClock from '@/components/FlipClock.vue';
import LinyufanHeader from '@/components/Header.vue';
import { Countdown } from 'vue3-flip-countdown';
import storageUtil from '@/utils/storageUtil';

let marqueeText = ref('林羽凡时钟www.Linyufan.com');
let marqueeDuration = ref(5); // 滚动完整一遍所需的时间（秒） 
let isShowmarqueeText = ref(false); // 是否显示跑马灯
let countdownLabels = reactive({ days: '天', hours: '小时', minutes: '分钟', seconds: '秒' });

let countdownDeadline = ref('2050-01-01 00:00:00'); //倒计时的时间
let isShowCountdownTime = ref(false); //是否显示倒计时

const childRefFlipClock = ref(); //执行子组件中的方法用

const homeBackground=ref('');

onBeforeMount(() => {
    // console.log('onBeforeMount');
})

onMounted(() => {
    console.log('onMounted');
})
let millisecondsData = reactive([]);
//计时
const clockingTime = (() => {
    let jsTime = new Date().getTime() + (10 * 60 * 1000); // 以毫秒为单位的时间戳
    const date = new Date(jsTime);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 月份从0开始，需要加1
    const day = date.getDate();
    const hours = date.getHours();
    const min = date.getMinutes();
    const seconds = date.getSeconds();
    const milliseconds = date.getMilliseconds(); //获取毫秒
    const timeString = `${year}-${month}-${day} ${hours}:${min}:${seconds}:${milliseconds}`;
    millisecondsData.push(timeString)
    // 检查数组长度是否达到5个元素  
    if (millisecondsData.length > 5) {
        // 如果达到5个元素，删除第一个元素
        millisecondsData.shift();
    }
    // console.log('timeString', timeString);
    // console.log('millisecondsData', millisecondsData);
})

//移除毫秒的tag
const handleCloseTag = (tag) => {
    // console.log('移除', tag);
    millisecondsData.splice(millisecondsData.indexOf(tag), 1)
}

// 重置倒计时时间 2024.4.14
const resetCountdownTime = (() => {
    let jsTime = new Date().getTime() + (10 * 60 * 1000); // 以毫秒为单位的时间戳
    const date = new Date(jsTime);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 月份从0开始，需要加1
    const day = date.getDate();
    const hours = date.getHours();
    const min = date.getMinutes();
    const seconds = date.getSeconds();
    const timeString = `${year}-${month}-${day} ${hours}:${min}:${seconds}`;
    storageUtil.saveToLocalStorage('countdownTime', timeString);
    countdownDeadline.value = timeString;
})

listen('home-event', (event) => {
    // console.log('Received event:', event.payload);
    let e = event.payload;
    isShowCountdownTime.value = e.isShowCountdownTime;
    countdownDeadline.value = e.countdownDeadline;
    marqueeText.value = e.marqueeText;
    marqueeDuration.value = e.marqueeDuration;
    homeBackground.value = e.homeBackground;
    if (e.marqueeText.length > 0) {
        isShowmarqueeText.value = true;
    } else {
        isShowmarqueeText.value = false;
    }

    //解决电脑休眠唤醒后，软件中的时间没有更新的问题，在提交设置后，重置一次时间 2024.4.15
    //最好的解决办法是通过rust获取系统是否唤醒，再更新时间
    if (childRefFlipClock.value && typeof childRefFlipClock.value.init === 'function') {
        childRefFlipClock.value.init();
        childRefFlipClock.value.run();
    }
});

//获取背景 2024.4.15
let homeBackgroundStorage = storageUtil.getFromLocalStorage('homeBackground');
if (homeBackgroundStorage != null) {
    homeBackground.value = homeBackgroundStorage;
}

// 获取marqueeText
let marqueeTextStorage = storageUtil.getFromLocalStorage('marqueeText');
if (marqueeTextStorage && marqueeTextStorage.length > 0) {
    marqueeText.value = marqueeTextStorage;
    isShowmarqueeText.value = true;
}

// 获取marqueeDuration
let marqueeDurationStorage = storageUtil.getFromLocalStorage('marqueeDuration');
if (marqueeDurationStorage != null) {
    marqueeDuration.value = marqueeDurationStorage;
}

//倒计时显示相关
let isShowCountdownTimeStorage = storageUtil.getFromLocalStorage('isShowCountdownTime');
if (isShowCountdownTimeStorage == null) {
    //没有倒计时设置
    // console.log('没有倒计时设置', isShowCountdownTimeStorage)
    isShowCountdownTime.value = false; //是否显示倒计时
    storageUtil.saveToLocalStorage('isShowCountdownTime', false);
} else {
    //有倒计时设置
    // console.log('有倒计时设置', isShowCountdownTimeStorage)
    // var boolValue = isShowCountdownTimeStorage === "true"; // false 字符串转boolean
    isShowCountdownTime.value = JSON.parse(isShowCountdownTimeStorage); // false 字符串转boolean
    let countdownDeadlineStorage = storageUtil.getFromLocalStorage('countdownTime')
    // console.log('countdownDeadlineStorage', countdownDeadlineStorage)
    if (countdownDeadlineStorage != null) {
        countdownDeadline.value = countdownDeadlineStorage;
    }
}
//倒计时显示相关


</script>

<style scoped>
.home {
    border-radius: 10px;
}

/deep/ .el-tag__content {
    width: 100%;
}

.marquee {
    width: 80%;
    overflow: hidden;
    position: relative;
    margin: 10px auto;
}

.marquee-text {
    display: inline-block;
    padding-left: 100%;
    /* 初始时将文字隐藏在容器外部 */
    white-space: nowrap;
    animation: marquee linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}
</style>